<template>
    <div class="box">
        <el-container>
            <el-aside width="200px">
                <div class=" leftTitle"><i class="el-icon-goods"></i>&nbsp;<span>商店</span> </div>
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    @select="selects" background-color="#5F6770" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1">
                        <i class=" el-icon-present"></i>
                        <span slot="title">推荐商品</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-s-promotion"></i>
                        <span slot="title">优惠购卡</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-sell"></i>
                        <span slot="title">余额充值</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <div v-if="keys == 1" class="tuijian">
                    <div class="first">空月祝福</div>
                    <div class="second">
                        <div v-if="daoqiTime" class="shengyu">
                            <span>特惠卡</span>
                        </div>
                        <div v-if="!daoqiTime" class="shengyu2">
                            <span>有效期至</span> <span>{{vipendtime}}</span>
                        </div>
                        <div style="width: 100%;height: 90%;">
                            <div class="cart">
                            </div>
                            <div style="width: 200px; height: 300px; display: inline-block;  vertical-align:top">
                                <div style="height: 100px;width: 200px; text-align: center;">
                                    <span
                                        style="display: block;font-size: 22px;margin-top: 30px;">特&nbsp;&nbsp;&nbsp;惠&nbsp;&nbsp;&nbsp;卡</span>
                                    <span style="display: block;font-size: 18px;margin-top: 15px;">￥ 30元 /
                                        30天</span>
                                    <div style="margin-top: 35px;font-size: 13px;">
                                        <div>抵扣规则</div>
                                        <div>每单最多抵扣30分钟</div>
                                    </div>
                                    <div @click="tehuicart" class="paycart">购买</div>
                                    <el-dialog title="提示" :visible.sync="tehuika" width="30%" style="margin-top: 25vh;">
                                        <span>是否开通特惠卡！</span>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button @click="tehuika = false">取 消</el-button>
                                            <el-button type="primary" @click="showTehuika">确 定</el-button>
                                        </span>
                                    </el-dialog>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="keys == 2" class="tuijian">
                    <div class="first">优惠卡</div>
                    <div class="youhuicart">
                        <div style="margin-left: 6%">
                            <div>
                                <img style="display: inline-block;" src="../../assets/bike1.png" alt="" width="210px"
                                    height="130px">
                                <div style="width: 80px; height: 130px; display: inline-block;  vertical-align:top">
                                    <div style="height: 130px;width: 100px; text-align: center;">
                                        <span style="display: block;font-size: 16px;margin-top: 40px;">周卡</span>
                                        <span style="display: block;font-size: 14px;margin-top: 15px;">￥ 15元 /
                                            7天</span>

                                        <div @click="youhuicart(value = '周卡')" class="paycart2">购买</div>
                                    </div>
                                </div>
                            </div>
                            <div
                                style="font-size: 13px;width: 150px; height: 40px;margin: 5px 0 0 10px; text-align: center;">
                                <div>抵扣规则</div>
                                <div>每单最多抵扣30分钟</div>
                            </div>

                        </div>
                        <div>
                            <div>
                                <img style="display: inline-block;" src="../../assets/bike1.png" alt="" width="210px"
                                    height="130px">
                                <div style="width: 80px; height: 130px; display: inline-block;  vertical-align:top">
                                    <div style="height: 130px;width: 100px; text-align: center;">
                                        <span style="display: block;font-size: 16px;margin-top: 40px;">月卡</span>
                                        <span style="display: block;font-size: 14px;margin-top: 15px;">￥ 45元 /
                                            30天</span>

                                        <div @click="youhuicart(value = '月卡')" class="paycart2">购买</div>
                                    </div>
                                </div>
                            </div>
                            <div
                                style="font-size: 13px;width: 150px; height: 40px;margin: 5px 0 0 10px; text-align: center;">
                                <div>抵扣规则</div>
                                <div>每单最多抵扣30分钟</div>
                            </div>

                        </div>
                        <div style="margin-left: 6%">
                            <div>
                                <img style="display: inline-block;" src="../../assets/bike1.png" alt="" width="210px"
                                    height="130px">
                                <div style="width: 80px; height: 130px; display: inline-block;  vertical-align:top">
                                    <div style="height: 130px;width: 100px; text-align: center;">
                                        <span style="display: block;font-size: 16px;margin-top: 40px;">季卡</span>
                                        <span style="display: block;font-size: 14px;margin-top: 15px;">￥125元 /
                                            90天</span>

                                        <div @click="youhuicart(value = '季卡')" class="paycart2">购买</div>
                                    </div>
                                </div>
                            </div>
                            <div
                                style="font-size: 13px;width: 150px; height: 40px;margin: 5px 0 0 10px; text-align: center;">
                                <div>抵扣规则</div>
                                <div>每单最多抵扣30分钟</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img style="display: inline-block;" src="../../assets/bike1.png" alt="" width="210px"
                                    height="130px">
                                <div style="width: 80px; height: 130px; display: inline-block;  vertical-align:top">
                                    <div style="height: 130px;width: 100px; text-align: center;">
                                        <span style="display: block;font-size: 16px;margin-top: 40px;">年卡</span>
                                        <span style="display: block;font-size: 14px;margin-top: 15px;">￥ 450元 /
                                            365天</span>

                                        <div @click="youhuicart(value = '年卡')" class="paycart2">购买</div>
                                    </div>
                                </div>
                            </div>
                            <div
                                style="font-size: 13px;width: 150px; height: 40px;margin: 5px 0 0 10px; text-align: center;">
                                <div>抵扣规则</div>
                                <div>每单最多抵扣30分钟</div>
                            </div>

                        </div>
                    </div>
                    <div style="text-align: center;">
                        <el-dialog title="提示" :visible.sync="youhuika" width="30%" style="margin-top: 25vh;">
                            <span>是否开通优惠卡-{{youhuikaname}}！</span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="youhuika = false">取 消</el-button>
                                <el-button type="primary" @click="showyouhuika">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>

                </div>
                <div v-if="keys == 3" class="tuijian">
                    <div class="first">充值中心</div>
                    <div class="chongzhicenter">
                        <el-radio-group v-model="radio" size="mini">
                            <el-radio label="10" border>10元</el-radio>
                            <el-radio label="20" border>20元</el-radio>
                            <el-radio label="30" border>30元</el-radio>
                            <el-radio label="50" border>50元</el-radio>
                            <el-radio label="100" border>100元</el-radio>
                            <el-radio label="200" border>200元</el-radio>
                        </el-radio-group>
                        <div style="height: 30%; width: 80%;  margin: 10% 0 0 10%;">
                            <el-form ref="form" :model="form" label-width="80px">
                                <el-form-item label="自定义">
                                    <el-input v-model="form.radio" placeholder="请输入金额"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-button @click="chongzhimoney" type="primary" size="medium  "
                                style="width: 100px;margin-left: 30px;margin-left: 53px;border-radius: 20px;">充值
                            </el-button>
                            <el-dialog title="充值" :visible.sync="chongzhi" width="30%" style="margin-top: 25vh;">
                                <span>是否确认充值！</span>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="chongzhi = false">取 消</el-button>
                                    <el-button type="primary" @click="updateMoney">确 定</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
    import { updateMoneydAPI, myInformationAPI, addvipAPI, getvipIdAPI, } from "@/api";
    import store from '@/store' // 引入store对象
    export default {
        data() {
            return {
                users: {
                    id: '',
                    notvip: 0
                },
                vipendtime: '',
                statusData: '',
                youhuikaname: '',
                daoqiTime: true,
                endTime: '',
                addvipData: {
                    id: '',
                    name: '',
                    phone: '',
                    address: '',
                    cart: '',
                    cartType: '',
                    sex: '',
                    memberType: '',
                    memberTime: '',
                    memberEndTime: ''
                },
                userHome: {
                    money: 0,
                },
                moneyData: {
                    id: '',
                    money: '',
                },
                chongzhi: false,
                youhuika: false,//优惠卡
                tehuika: false,//特惠卡
                form: {
                    radio: 0
                },
                keys: '1',
                radio: 0
            }
        },
        created() {
            this.init()
            this.getvipId()
        },
        methods: {
            //根据id获取会员信息
            async getvipId() {
                var id = this.$store.state.userInfo.id
                const { data: res } = await getvipIdAPI(id)
                if (res.status == 0) {
                    if (res.data.memberType == '特惠卡') {
                        this.vipendtime = res.data.memberEndTime.split(' ')[0]
                        this.daoqiTime = false
                    } else {
                        this.daoqiTime = true
                    }
                }
                this.statusData = res.status
            },
            async init() {
                const { data: res } = await myInformationAPI()
                if (res.status == 0) {
                    this.userHome.money = res.data.money
                }
            },
            async updateMoney() {
                const { data: res } = await myInformationAPI()
                if (res.status == 0) {
                    if (res.data.name == null || res.data.address == null || res.data.cart == null
                        || res.data.cartType == null || res.data.phone == null
                        || res.data.sex == null
                    ) {
                        this.$message({
                            showClose: true,
                            message: '请先完善个人信息！',
                            type: 'warning',
                            offset: 60
                        });
                        this.chongzhi = false
                    } else {
                        if (this.form.radio !== 0) {
                            this.moneyData.money = Number(this.form.radio) + Number(this.userHome.money)
                            this.moneyData.id = this.$store.state.userInfo.id
                            const { data: res } = await updateMoneydAPI(this.moneyData)
                            if (res.status === 0) {
                                this.$message({
                                    showClose: true,
                                    message: '充值成功',
                                    type: 'success',
                                    offset: 60
                                });
                                this.init()
                                this.$emit('paymoney', this.moneyData.money)
                            }
                            this.chongzhi = false
                        } else {
                            this.moneyData.money = Number(this.radio) + Number(this.userHome.money)
                            this.moneyData.id = this.$store.state.userInfo.id
                            const { data: res } = await updateMoneydAPI(this.moneyData)
                            if (res.status === 0) {
                                this.$message({
                                    showClose: true,
                                    message: '充值成功',
                                    type: 'success',
                                    offset: 60
                                });
                                this.init()
                                this.$emit('paymoney', this.moneyData.money)
                            }
                            this.chongzhi = false
                        }
                    }
                }
            },
            chongzhimoney() {
                if (this.form.radio == 0 && this.radio == 0) {
                    this.$message({
                        showClose: true,
                        message: '请选择金额或输入自定义金额!',
                        type: 'warning',
                        offset: 100
                    });
                    this.chongzhi = false
                } else {
                    this.chongzhi = true
                }
            },
            //优惠卡
            async youhuicart(val) {
                this.getvipId()
                this.youhuikaname = val
                const { data: res } = await myInformationAPI()
                if (res.status == 0) {
                    console.log(res)
                    if (res.data.name == null || res.data.address == null || res.data.cart == null
                        || res.data.cartType == null || res.data.phone == null
                        || res.data.sex == null
                    ) {
                        this.$message({
                            showClose: true,
                            message: '请先完善个人信息！',
                            type: 'warning',
                            offset: 60
                        });
                    } else {
                        this.addvipData.id = res.data.id
                        this.addvipData.name = res.data.name
                        this.addvipData.address = res.data.address
                        this.addvipData.cart = res.data.cart
                        this.addvipData.cartType = res.data.cartType
                        this.addvipData.phone = res.data.phone
                        this.addvipData.sex = res.data.sex
                        this.init()
                        this.youhuika = true
                    }
                }
            },
            //确认购买优惠卡
            async showyouhuika() {
                if (this.statusData == 0) {
                    this.$message({
                        showClose: true,
                        message: '您已购买会员卡，请勿重复购买！',
                        type: 'warning',
                        offset: 60
                    });
                    this.youhuika = false
                } else {
                    if (this.youhuikaname == '周卡') {
                        if (this.userHome.money < 15) {
                            this.$message({
                                showClose: true,
                                message: '余额不足请充值！',
                                type: 'warning',
                                offset: 60
                            });
                            this.youhuika = false
                        } else {
                            this.moneyData.money = this.userHome.money - 15
                            let timeDate = new Date();
                            let year = timeDate.getFullYear();
                            let mounth = timeDate.getMonth() + 1;
                            mounth = mounth >= 10 ? mounth : "0" + mounth;
                            let day = timeDate.getDate();
                            day = day >= 10 ? day : "0" + day;
                            let hours = timeDate.getHours();
                            hours = hours >= 10 ? hours : "0" + hours;
                            let minutes = timeDate.getMinutes();
                            minutes = minutes >= 10 ? minutes : "0" + minutes;
                            let seconds = timeDate.getSeconds();
                            seconds = seconds >= 10 ? seconds : "0" + seconds;
                            this.addvipData.memberTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
                            this.endTime = `${hours}:${minutes}:${seconds}`
                            this.addvipData.memberType = '周卡'
                            this.getDay(7);

                            const { data: res } = await addvipAPI(this.addvipData)
                            if (res.status === 0) {
                                this.$message({
                                    showClose: true,
                                    message: '购买成功!',
                                    type: 'success',
                                    offset: 60
                                });
                                this.$emit('uservip', '会员将到期！')
                                this.getvipId()
                                this.moneyData.id = this.$store.state.userInfo.id
                                const { data: res } = await updateMoneydAPI(this.moneyData)
                                if (res.status === 0) {
                                    this.init()
                                    this.$emit('paymoney', this.moneyData.money)
                                    this.$emit('vipshow', '周卡')
                                }
                            }
                            this.youhuika = false
                        }
                    } else if (this.youhuikaname == '月卡') {
                        if (this.userHome.money < 45) {
                            this.$message({
                                showClose: true,
                                message: '余额不足请充值！',
                                type: 'warning',
                                offset: 60
                            });
                            this.youhuika = false
                        } else {
                            this.moneyData.money = this.userHome.money - 45
                            let timeDate = new Date();
                            let year = timeDate.getFullYear();
                            let mounth = timeDate.getMonth() + 1;
                            mounth = mounth >= 10 ? mounth : "0" + mounth;
                            let day = timeDate.getDate();
                            day = day >= 10 ? day : "0" + day;
                            let hours = timeDate.getHours();
                            hours = hours >= 10 ? hours : "0" + hours;
                            let minutes = timeDate.getMinutes();
                            minutes = minutes >= 10 ? minutes : "0" + minutes;
                            let seconds = timeDate.getSeconds();
                            seconds = seconds >= 10 ? seconds : "0" + seconds;
                            this.addvipData.memberTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
                            this.endTime = `${hours}:${minutes}:${seconds}`
                            this.addvipData.memberType = '月卡'
                            this.getDay(30);

                            const { data: res } = await addvipAPI(this.addvipData)
                            if (res.status === 0) {
                                this.$message({
                                    showClose: true,
                                    message: '购买成功!',
                                    type: 'success',
                                    offset: 60
                                });
                                this.$emit('uservip', '会员将到期！')
                                this.getvipId()
                                this.moneyData.id = this.$store.state.userInfo.id
                                const { data: res } = await updateMoneydAPI(this.moneyData)
                                if (res.status === 0) {
                                    this.init()
                                    this.$emit('paymoney', this.moneyData.money)
                                    this.$emit('vipshow', '月卡')
                                }
                            }
                            this.youhuika = false
                        }
                    } else if (this.youhuikaname == '季卡') {
                        if (this.userHome.money < 125) {
                            this.$message({
                                showClose: true,
                                message: '余额不足请充值！',
                                type: 'warning',
                                offset: 60
                            });
                            this.youhuika = false
                        } else {
                            this.moneyData.money = this.userHome.money - 125
                            let timeDate = new Date();
                            let year = timeDate.getFullYear();
                            let mounth = timeDate.getMonth() + 1;
                            mounth = mounth >= 10 ? mounth : "0" + mounth;
                            let day = timeDate.getDate();
                            day = day >= 10 ? day : "0" + day;
                            let hours = timeDate.getHours();
                            hours = hours >= 10 ? hours : "0" + hours;
                            let minutes = timeDate.getMinutes();
                            minutes = minutes >= 10 ? minutes : "0" + minutes;
                            let seconds = timeDate.getSeconds();
                            seconds = seconds >= 10 ? seconds : "0" + seconds;
                            this.addvipData.memberTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
                            this.endTime = `${hours}:${minutes}:${seconds}`
                            this.addvipData.memberType = '季卡'
                            this.getDay(90);

                            const { data: res } = await addvipAPI(this.addvipData)
                            if (res.status === 0) {
                                this.$message({
                                    showClose: true,
                                    message: '购买成功!',
                                    type: 'success',
                                    offset: 60
                                });
                                this.$emit('uservip', '会员将到期！')
                                this.getvipId()
                                this.moneyData.id = this.$store.state.userInfo.id
                                const { data: res } = await updateMoneydAPI(this.moneyData)
                                if (res.status === 0) {
                                    this.init()
                                    this.$emit('paymoney', this.moneyData.money)
                                    this.$emit('vipshow', '季卡')
                                }
                            }
                            this.youhuika = false
                        }
                    } else if (this.youhuikaname == '年卡') {
                        if (this.userHome.money < 450) {
                            this.$message({
                                showClose: true,
                                message: '余额不足请充值！',
                                type: 'warning',
                                offset: 60
                            });
                            this.youhuika = false
                        } else {
                            this.moneyData.money = this.userHome.money - 450
                            let timeDate = new Date();
                            let year = timeDate.getFullYear();
                            let mounth = timeDate.getMonth() + 1;
                            mounth = mounth >= 10 ? mounth : "0" + mounth;
                            let day = timeDate.getDate();
                            day = day >= 10 ? day : "0" + day;
                            let hours = timeDate.getHours();
                            hours = hours >= 10 ? hours : "0" + hours;
                            let minutes = timeDate.getMinutes();
                            minutes = minutes >= 10 ? minutes : "0" + minutes;
                            let seconds = timeDate.getSeconds();
                            seconds = seconds >= 10 ? seconds : "0" + seconds;
                            this.addvipData.memberTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
                            this.endTime = `${hours}:${minutes}:${seconds}`
                            this.addvipData.memberType = '年卡'
                            this.getDay(365);

                            const { data: res } = await addvipAPI(this.addvipData)
                            if (res.status === 0) {
                                this.$message({
                                    showClose: true,
                                    message: '购买成功!',
                                    type: 'success',
                                    offset: 60
                                });
                                this.$emit('uservip', '会员将到期！')
                                this.getvipId()
                                this.moneyData.id = this.$store.state.userInfo.id
                                const { data: res } = await updateMoneydAPI(this.moneyData)
                                if (res.status === 0) {
                                    this.init()
                                    this.$emit('paymoney', this.moneyData.money)
                                    this.$emit('vipshow', '年卡')
                                }
                            }
                            this.youhuika = false
                        }
                    }

                    this.youhuika = false
                }

            },
            getDay(day) {
                var today = new Date();
                var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
                today.setTime(targetday_milliseconds);
                var tYear = today.getFullYear();
                var tMonth = today.getMonth();
                var tDate = today.getDate();
                tMonth = this.doHandleMonth(tMonth + 1);
                tDate = this.doHandleMonth(tDate);
                this.addvipData.memberEndTime = `${tYear}-${tMonth}-${tDate}` + ' ' + this.endTime
            },
            doHandleMonth(month) {
                var m = month;
                if (month.toString().length == 1) {
                    m = "0" + month;
                }
                return m;
            },
            //特惠卡
            async tehuicart() {
                this.getvipId()
                const { data: res } = await myInformationAPI()
                if (res.status == 0) {
                    console.log(res)
                    if (res.data.name == null || res.data.address == null || res.data.cart == null
                        || res.data.cartType == null || res.data.phone == null
                        || res.data.sex == null
                    ) {
                        this.$message({
                            showClose: true,
                            message: '请先完善个人信息！',
                            type: 'warning',
                            offset: 60
                        });
                    } else {
                        this.addvipData.id = res.data.id
                        this.addvipData.name = res.data.name
                        this.addvipData.address = res.data.address
                        this.addvipData.cart = res.data.cart
                        this.addvipData.cartType = res.data.cartType
                        this.addvipData.phone = res.data.phone
                        this.addvipData.sex = res.data.sex
                        this.init()
                        this.tehuika = true
                    }
                }
            },
            //确认购买特惠卡
            async showTehuika() {
                if (this.statusData == 0) {
                    this.$message({
                        showClose: true,
                        message: '您已购买会员卡，请勿重复购买！',
                        type: 'warning',
                        offset: 60
                    });
                    this.tehuika = false
                } else {
                    if (this.userHome.money < 30) {
                        this.$message({
                            showClose: true,
                            message: '余额不足请充值！',
                            type: 'warning',
                            offset: 60
                        });
                        this.tehuika = false
                    } else {
                        this.moneyData.money = this.userHome.money - 30
                        let timeDate = new Date();
                        let year = timeDate.getFullYear();
                        let mounth = timeDate.getMonth() + 1;
                        mounth = mounth >= 10 ? mounth : "0" + mounth;
                        let day = timeDate.getDate();
                        day = day >= 10 ? day : "0" + day;
                        let hours = timeDate.getHours();
                        hours = hours >= 10 ? hours : "0" + hours;
                        let minutes = timeDate.getMinutes();
                        minutes = minutes >= 10 ? minutes : "0" + minutes;
                        let seconds = timeDate.getSeconds();
                        seconds = seconds >= 10 ? seconds : "0" + seconds;
                        this.addvipData.memberTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
                        this.endTime = `${hours}:${minutes}:${seconds}`
                        this.addvipData.memberType = '特惠卡'
                        this.getDay(30);

                        const { data: res } = await addvipAPI(this.addvipData)
                        if (res.status === 0) {
                            this.$message({
                                showClose: true,
                                message: '购买成功!',
                                type: 'success',
                                offset: 60
                            });
                            this.$emit('uservip', '会员将到期！')
                            this.getvipId()
                            this.moneyData.id = this.$store.state.userInfo.id
                            const { data: res } = await updateMoneydAPI(this.moneyData)
                            if (res.status === 0) {
                                this.init()
                                this.$emit('paymoney', this.moneyData.money)
                                this.$emit('vipshow', '特惠卡')
                            }
                        }
                        this.tehuika = false
                    }
                }

            },
            selects(key, keyPath) {
                this.keys = key
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
    }
</script>
<style scoped>
    /deep/ .el-form {
        display: inline-block;
    }

    /deep/ .el-input__inner {
        border-radius: 10px;
    }

    /deep/ .el-radio.is-bordered+.el-radio.is-bordered {
        margin-left: 65px;
    }

    /deep/ .el-radio {
        width: 100px;
        color: #606266;
        font-weight: 500;
        line-height: 30px;
        font-size: 20px;
        outline: 0;
        margin: 50px 0px 0 65px;
        background-color: #62bb35;
        height: 50px !important;
    }

    .chongzhicenter {
        padding-top: 5px;
        height: 60%;
        width: 60%;
        background-color: #f9d56a;
        margin: 10% 0 0 17%;
        border-radius: 10px;

    }

    .youhuicart>div {
        float: left;
        width: 40%;
        height: 40%;
        margin: 3% 6% 1% 1%;
        background-color: #f6d984;
    }

    .youhuicart {
        padding-top: 5px;
        height: 80%;
        width: 85%;
        background-color: #f9d56a;
        margin: 2% 0 0 5%;
        border-radius: 10px;

    }

    .paycart2 {
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        width: 90px;
        margin: 35px 0 0 8px;
        background-color: #5F6770;
        color: #fff;
        border-radius: 15px;
    }

    .paycart {
        cursor: pointer;
        line-height: 35px;
        height: 35px;
        width: 140px;
        margin: 40px 0 0 33px;
        background-color: #5F6770;
        color: #fff;
        border-radius: 20px;
    }

    .cart {
        display: inline-block;
        height: 300px;
        width: 450px;
        background-image: url("../../assets/bike1.png");
        background-size: 100%;
    }

    .shengyu {
        top: 20px;
        margin: 5px 0 0 15px;
        width: 100px;
        height: 25px;
        text-align: center;
        border-radius: 20px;
        background-color: #5ECACA;
    }

    .shengyu2 {
        top: 20px;
        margin: 5px 0 0 15px;
        width: 170px;
        height: 25px;
        text-align: center;
        border-radius: 20px;
        background-color: #5ECACA;
        font-size: 14px;
        line-height: 25px;
    }

    .second {
        padding-top: 5px;
        height: 60%;
        width: 75%;
        background-color: #f9d56a;
        margin: 8% 0 0 11%;
        border-radius: 10px;

    }

    .first {
        height: 10%;
        width: 30%;
        background-color: #5ECACA;
        text-align: center;
        line-height: 55px;
        color: #f9d56a;
        font-size: 20px;
        border-radius: 10px;

    }

    .tuijian {
        background-color: #6dcfc294;
        height: 93.05%;
        width: 96%;
        padding: 4.5% 0 0 4%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .el-main {
        padding: 0;
        width: 90%;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
        /* margin: 0 1% 0 1%; */

    }

    .leftTitle {
        height: 7% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #4E555C;
        color: #f9d56a;
        font-size: 20px;
    }

    .el-container {
        height: 100%;
        width: 100%;

    }

    .el-aside {
        width: 20%;
        height: 100%;
        background: #5F6770;
    }

    .box {
        height: 100%;
        width: 99.2%;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
    }
</style>